<template>
  <div class="compass">
    <button class="left side" @click="handleRotate('left')"></button>
    <button class="center" @click="handleRotate('center')" :style="`transform: rotate(${rotate}deg)`"></button>
    <button class="right side" @click="handleRotate('right')"></button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const rotate = ref(0);
  const emits = defineEmits(['rotate']);

  function handleRotate(type) {
    if (type === 'left') {
      rotate.value += -30;
    } else if (type === 'right') {
      rotate.value += 30;
    } else {
      rotate.value = 0;
    }
    emits('rotate', (rotate.value * Math.PI) / 180);
  }
</script>

<style lang="less" scoped>
  .compass {
    position: absolute;
    z-index: 1;
    left: 330px;
    bottom: 15px;
    width: 52px;
    height: 54px;
    background: url(./compass.png) 0% 0% / 266px no-repeat;
    .side {
      position: absolute;
      outline: none;
      border: none;
      cursor: pointer;
      top: 5px;
      z-index: 1;
      width: 15px;
      height: 42px;
      opacity: 1;
    }
    .left {
      left: 2px;
      background: url(./compass.png) -75px -5px / 266px no-repeat;
      transform: rotate(0);
      &:hover {
        background: url(./compass.png) -89px -5px / 266px no-repeat;
      }
    }
    .right {
      background: url(./compass.png) -75px -5px / 266px no-repeat;
      right: 2px;
      transform: scaleX(-1);
      &:hover {
        background: url(./compass.png) -89px -5px / 266px no-repeat;
      }
    }
    .center {
      position: absolute;
      outline: none;
      border: none;
      background: url(./compass.png) -56px -4px / 266px no-repeat;
      cursor: pointer;
      left: 19px;
      top: 4px;
      width: 14px;
      height: 44px;
      opacity: 1;
      transition: all 0.5s;
    }
  }
</style>
